<!--新增编辑素材-->
<template>
  <div>
    <el-dialog
      :title="form.id ? '编辑专题分类' : '新增专题分类'"
      :visible="lanternShow"
      width="800px"
      center
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <el-form :model="form" ref="form" :rules="rules" label-width="120px">
        <el-form-item label="专题分类名称" prop="title">
          <el-input
            placeholder="请输入专题分类名称"
            style="width: 600px"
            v-model="form.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="顶级专题分类" prop="parentId">
          <el-select
            style="width: 600px"
            v-model="form.parentId"
            placeholder="请选择分类"
          >
            <el-option
              v-for="item in runCateList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序">
          <el-input
            type="Number"
            style="width: 500px"
            placeholder="请输入排序"
            v-model="form.sort"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            style="width: 100px"
            size="small"
            type="primary"
            @click="onsubmit('form')"
            >确定</el-button
          >
          <el-button
            style="width: 100px"
            size="small"
            @click="handleClose('form')"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  Addnewmaterialssubject,
  Modifymaterialssubject,
  GETmaterialsubject,
  sourcematerialsubject,
} from "@/api/lesson";
export default {
  props: {},
  data() {
    return {
      idx: "",
      dataForm: "",
      lanternShow: false,
      form: {
        parentId: " 0",
        name: "",
        sort: "",
      },
      runCateList: [
        {
          value: "0",
          label: "顶级分类",
        },
      ],
      rules: {
        parentId: [{ required: true, message: "请选择分类", trigger: "blur" }],
        name: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
    };
  },
  methods: {
    // 查询
    getListinit() {
      this.listLoading = true;
    },
    onsubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.idx == 2) {
            var obj = {
              id: this.form.id,
              name: this.form.name,
              sort: this.form.sort,
            };
            Modifymaterialssubject(obj).then((res) => {
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.handleClose();
                this.$emit("getList");
              }
            });
          } else {
            var obj = {
              parentId: this.form.parentId ? this.form.parentId : 0,
              name: this.form.name,
              sort: this.form.sort,
            };
            Addnewmaterialssubject(obj).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.handleClose();
                this.$emit("getList");
              }
            });
          }
        }
      });
    },
    resetForm() {
      this.form = {
        parentId: "0",
        name: "",
        sort: "",
      };
    },
    handleClose() {
      this.resetForm();
      this.lanternShow = false;
    },
    async openDialog(item, v) {
      this.initget();
      this.idx = v;
      if (v == 1) {
        this.form.parentId = item.id;
      } else if (v == 2) {
        this.form = item;
        this.form.parentId = item.parentId;
      } else {
        this.resetForm();
        this.form.parentId = "0";
      }
      this.lanternShow = true;
    },
    async initget() {
      await sourcematerialsubject()
        .then((res) => {
          var arr = res.data;
          this.runCateList = [];
          arr.map((item) => {
            this.runCateList.push({
              value: item.id,
              label: item.name,
            });
          });
          this.listLoading = false;
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.uploadPic {
  width: 90px;
  height: 90px;

  background: #eeeeee;
  border-radius: 8px;
  position: relative;
  > i {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
